<template>
  <!-- 问卷调查 单选 -->
  <div>
    <el-row>
      <p class="title">{{title}}</p>
      <el-form ref="form" :model="form" label-width="180px">
        <el-form-item label="标题" prop="questionnaire_title" :rules="filter_rules({required:true})">
          <el-input placeholder="请输入标题" style="width: 400px;" v-model="form.questionnaire_title">
          </el-input>
        </el-form-item>
        <el-form-item :prop="index + ''" :rules="filter_rules({required:true})" :label="option.name" v-for="(option, index) in options" :key="index">
          <div class="item-box">
            <el-input placeholder="请输入标题" style="width: 400px;" v-model="form[index]">
            </el-input>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <i @click="add()" class="el-icon-circle-plus" v-if="index == options.length - 1"></i>
            <i @click="remove(index)" class="el-icon-remove" v-else></i>
          </div>
        </el-form-item>
      </el-form>
    </el-row>
  </div>
</template>

<script>
import { toSimplifiedChinese } from "@/utils";

export default {
  name: "doubleTemp",
  props: {
    index: Number,
    inNum: Number,
    doubleobj: Object
  },
  computed: {
    title() {
      return "【多选题" + toSimplifiedChinese(this.index + 1) + "】";
    }
  },
  data() {
    return {
      form: {},
      options: [{ name: "选项一" }]
    };
  },
  methods: {
    add() {
      this.options.push({
        name: "选项" + toSimplifiedChinese(this.options.length + 1)
      });
    },
    remove(i) {
      let list = [],
        reForm = {};
      for (const key in this.form) {
        if (this.form.hasOwnProperty(key)) {
          const element = this.form[key];
          if (key != i) {
            list.push(element);
          }
        }
      }
      list.forEach((item, index) => {
        reForm[index + ""] = item;
      });
      delete this.form[this.options.length - 1];
      this.form = { ...this.form, ...reForm };
      this.options.splice(i, 1);
    },
    async validate() {
      let flag = false;
      this.$refs["form"].validate(valid => {
        flag = valid;
        if (!valid) {
          return false;
        }
      });
      return flag;
    },
    async getData() {
      const result = {
        questionnaire_sort: this.inNum,
        questionnaire_title: this.form.questionnaire_title,
        question_type: 2
      };
      result.questionnaireOptions = this.options.map((_, i) => {
        return { questionnaire_option: this.form[i] };
      });
      return result;
    }
  },
  created() {
    if (this.$route.query.name == "edit") {
      this.form.questionnaire_title = this.doubleobj.questionnaire_title;
      if (this.doubleobj.questionnaireOptions) {
        this.doubleobj.questionnaireOptions.forEach((item, i) => {
          this.form[i] = item.questionnaire_option;
          this.options.push({
            name: "选项" + toSimplifiedChinese(this.options.length + 1)
          });
        });
        this.options.pop();
      }
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.title {
  padding: 0 0 10px;
}
.item-box {
  display: flex;
  align-items: center;
}
.el-icon-remove {
  color: #f56c6c;
  font-size: 26px;
  text-align: right;
  cursor: pointer;
}
.el-icon-circle-plus {
  color: #409eff;
  font-size: 26px;
  text-align: right;
  cursor: pointer;
}
</style>
